<!-- MAIN CONTAINER -->
<div>

  <!-- BOOK LIST -->
  <div class="panel large-6 columns">

      <!-- TITLE -->
      <h5>{{panelTitle}}: {{books.length}} items now!</h5>  
      <hr>

      <input type="text" ng-model="search" placeholder="Search">


      <!-- LIST --> 
      <ul>
        <!-- ITEM -->
        <li ng-repeat="item in books | filter:search">
          
          <!-- LINK -->
          <a ng-href="{{item.url}}" target="_blank">{{item.title}}</a>            
          
          <!-- REMOVE BUTTON -->
          <span class="radius  alert label"
                ng-click="removeBook($index, item)">x</span>

        </li>
      </ul>

  </div> <!-- end BOOK LIST -->





  <!-- ADD BOOK PANEL -->
  <div ng-controller="AddPanelCtrl"
       class="panel large-5 columns">

      <h4>ADD BOOK</h4>
      <span class="label success">Next book will be the #{{books.length+1}}</span>
      <hr>

       <!-- FORM -->
      <form name="myForm">

            <!-- TITLE -->
            <div class="row collapse control-group" 
                 ng-class="{error: myForm.bookTitle.$invalid}">

              <input type="text" name="bookTitle" 
                     ng-model="book.title" 
                     required ng-minlength="5" ng-maxlength="20"
                     placeholder="Add Book Description">

              <!-- ERROR MSG: MAX CHARS-->
              <span ng-show="myForm.bookTitle.$error.maxlength" class="help-inline">
                 Too many chars (Max 20)</span>

              <!-- ERROR MSG: MIN CHARS-->
              <span ng-show="myForm.bookTitle.$error.minlength" class="help-inline">
                 Required at least 5 chars</span>

            </div>
                
            <hr>
            <!-- BOOK LINK -->
            <div class="control-group" 
                 ng-class="{error: myForm.bookURL.$invalid}">

              <input type="url" name="bookURL" ng-model="book.url" required
                     placeholder="Add Book Link">

              <!-- ERROR MSG -->
              <span ng-show="myForm.bookURL.$error.url" class="help-inline">
                 URL not valid (i.e. "http://www.abc.com")</span>

            </div>

            <hr>
            <!-- SAVE BUTTON -->
            <button class="postfix" 
                      ng-click="save()"
                      ng-disabled="myForm.$invalid">Save</button>

      </form>

  </div> <!-- End ADD PANEL -->

</div>  <!-- End MAIN CONTAINER -->
